<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="项目" v-bind="col">
          <a-input placeholder="请输入项目名称" v-decorator="['name',{rules:[{required:true,message:'项目名称不可为空'}]}]"/>
        </a-form-item>
        <a-form-item label="所属小区" v-bind="col">
          <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
            <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="交费人" v-bind="col">
          <a-input placeholder="请输入交费人" v-decorator="['username',{rules:[{required:true,message:'请输入交费人'}]}]"/>
        </a-form-item>
        <a-form-item label="手机号" v-bind="col">
          <a-input placeholder="请输入手机号" v-decorator="['phone',{rules:[{required:true,message:'请输入手机号'}]}]"/>
        </a-form-item>
        <a-form-item label="金额" v-bind="col">
          <a-input placeholder="请输入金额" addonAfter="元" v-decorator="['money',{rules:[{required:true,message:'请输入金额'}]}]"/>
        </a-form-item>
        <a-form-item label="收费起止时间" v-bind="col">
          <a-range-picker v-decorator="['time', {rules:[{required:true,message:'请选择收费起止时间'}]}]" />
        </a-form-item>
        <a-form-item label="备注" v-bind="col">
          <a-input placeholder="请输入备注" v-decorator="['remarks']"/>
        </a-form-item>
        <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:8}}">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
  export default {
    name: 'charge_cashier_others',
    data() {
      return {
        bd_info:[{id:1,name:'测试小区'}], // 小区列表
        spinning:false,
        form:this.$form.createForm(this),
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        nowday:moment( new Date().getTime()),
        id:'', // 楼宇id
      }
    },
    async mounted() {
      this.getBdList();
    },
    methods:{
      ...mapGetters(['token', 'pmsArId', 'nowMg']),
      // 获取小区设置信息
      getInfo(id) {
        return new Promise((resolve,reject) => {
          this.axios({
            method:'post',
            url:'/community/get_building_info',
            params:{id,token:this.token()}
          }).then(res => {
            let { code,msg,data } = res;
            if(code === 0){
              resolve(data);
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
        })
      },
      getBdList(){
        this.axios({
            method:'get',
            url:'/community/get_bd_config_list',
            params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
          }).then(res => {
            let { code,msg,data } = res;
            if(code === 0){
             this.bd_info=data
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
      },
      // 提交信息
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          values.start_time=values.time[0].format('YYYY-MM-DD')
          values.end_time=values.time[1].format('YYYY-MM-DD')
          Object.assign(values,{token:this.token()});
          this.spinning = true;
          this.axios({
            method:'post',
            url:'/cashier/add_others',
            data:values,
          }).then(res => {
            this.spinning = false;
            if(res.code == 0){
              this.$message.success('添加收费成功',1);
              this.$router.go(0)
            }else this.$message.warning(res.msg);
          }).catch(() => {this.$message.error('服务器发生错误...',2);this.spinning = false;});
        });
      },
      // 图片大小验证
      checkImage(file) {
        if((file.size / 1024 / 1024) > 2) {
          this.$message.warning('图片最大不可超过2M',2);
          return false;
        }
      },
      // 上传图片
      imageUpload(info,text) {
        if (info.file.status === 'error') return this.$message.error(`${info.file.name}图片上传失败`);
        if (info.file.status === 'done') {
          console.log(info)
          const { file:{uid,response:{name,url}} } = info;
          if(text === 'logo_file') return this.logo_fileList.push({uid,name,url});
          if(text === 'bg_img') return this.bg_fileList.push({uid,name,url});
        }
        if (info.file.status === 'removed') {
          if(text === 'logo_file') this.logo_fileList = [];
          if(text === 'bg_img') this.bg_fileList = [];
        }
      },
      // 图片预览
      imgPreview(info) {
        this.previewImage = info.url || info.thumbUrl
        this.imagePreviewVisible = true
      },
      test(info){
        return info.fileList
        if(info.file.status === 'node') return info.file.uid;
      }
    }
  }
</script>

<style>

</style>
<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    padding:25px;
    box-sizing: border-box;
    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
</style>